<template>
  <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body :close-on-click-modal="false">
    <el-form ref="form" :model="request" size="small" label-width="110px" label-position="left" v-if="request">
      <div class="title">订单信息</div>

      <el-form-item label="订单号：" prop="orderId">
        {{request.orderId}}
      </el-form-item>

      <el-form-item label="产品体验链接：" prop="callbackUrl" v-if="request.callbackUrl">
        {{request.callbackUrl}}
      </el-form-item>

      <el-form-item label="下单时间：" prop="createTime">
        {{request.createTime}}
      </el-form-item>

      <el-form-item label="订单状态：" prop="status">
        <md-dict-tag :options="dictData['md_order_status']" :props="{ label: 'dictLabel', value: 'dictValue' }" :value="request.status" />
      </el-form-item>

      <el-form-item label="产品名称：" prop="productTitle">
        {{request.productTitle}}
      </el-form-item>

      <el-form-item label="产品售卖价：" prop="productSeliingPrice">
        ¥&nbsp;{{parseFloat(request.productSeliingPrice).toFixed(2)}}
      </el-form-item>

      <el-form-item label="产品市场价：" prop="productMarketPrice">
        ¥&nbsp;{{parseFloat(request.productMarketPrice).toFixed(2)}}
      </el-form-item>

      <el-form-item label="产品库存：" prop="productQuantity">
        {{request.productQuantity}}
      </el-form-item>

      <div class="title">用户信息</div>

      <el-form-item label="用户邮箱：" prop="userEmail">
        {{request.userEmail}}
      </el-form-item>

      <el-form-item label="用户昵称：" prop="userNick">
        {{request.userNick}}
      </el-form-item>

      <el-form-item label="用户性别" prop="userSex">
        <md-dict-tag :options="dictData['sys_user_sex']" :props="{ label: 'dictLabel', value: 'dictValue' }" :value="request.userSex" />
      </el-form-item>

      <div class="title">收货信息</div>

      <el-form-item label="收货人：" prop="addressName">
        {{request.addressName??'---'}}
      </el-form-item>

      <el-form-item label="电话号码：" prop="addressPhone">
        {{request.addressPhone??'---'}}
      </el-form-item>

      <el-form-item label="邮箱：" prop="addressEmail">
        {{request.addressEmail??'---'}}
      </el-form-item>

      <el-form-item label="邮编：" prop="addressZipCode">
        {{request.addressZipCode??'---'}}
      </el-form-item>

      <el-form-item label="国家：" prop="addressCountry">
        {{request.addressCountry??'---'}}
      </el-form-item>

      <el-form-item label="省：" prop="addressProvince">
        {{request.addressProvince??'---'}}
      </el-form-item>

      <el-form-item label="州：" prop="addressCity">
        {{request.addressCity??'---'}}
      </el-form-item>

      <el-form-item label="区：" prop="addressDistrict">
        {{request.addressDistrict??'---'}}
      </el-form-item>

      <el-form-item label="详细地址：" prop="addressDetail">
        {{request.addressDetail??'---'}}
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleCancel()">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mdGetDictData } from '@/ddd/dict.service.js'
export default {
  name: 'MdOrderDetailDialogComponent',
  props: {
    data: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      title: '订单详情',
      open: false,
      request: { ...this.data },
      dictData: {}
    }
  },
  watch: {
    data: {
      handler (_data) {
        if (_data) {
          this.request = { ..._data }
        } else {
          this.request = undefined
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    mdGetDictData(['md_order_status', 'sys_user_sex']).then(res => {
      this.dictData = res
    })
  },
  methods: {
    handleOpen () {
      this.open = true
    },
    handleCancel () {
      this.open = false

      const request = Object.assign({}, { ...this.request })

      const keys = Object.keys(request)
      if (keys.length > 0) {
        keys.forEach(key => {
          delete request[key]
        })
      }

      this.request = { ...request }
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
  padding-top: 15px;
}
</style>